<template>
  <div class="head-info" :class="{topHide : arrowShow}">
    <div class="info">
      <div class="info_one preview" v-if="pageType === 'mark'">
        <div class="info_one_left" @click="changeFileList">
          <i class="manue" :class="{seleted : listShow}"></i>
          <span>文件序列</span>
          <span style="padding-left:4px;">: {{currentFileId ? currentFileId : '--'}}</span>
        </div>
        <div class="info_one_right">
          <i class="schedule"></i>
          <span class="markpro">标注进度：
            <span class="fs14">{{ finishNum }}</span>/{{allFiles.length}}</span>
        </div>
        <i class="divide"></i>
      </div>
      <div class="allFile preview" v-if="pageType === 'mark'">
        <span class="no_select" v-if="filesType == 1">全部数据</span>
        <span class="no_select" v-if="filesType == 2">好数据</span>
        <span class="no_select" v-if="filesType == 3">坏数据</span>
        <span class="no_select" v-if="filesType == 4">未标注</span>
        <ul class="fileType">
          <li @click="selectData(1)" :class="{unclickable : !dataLength[0]}">全部数据</li>
          <li @click="selectData(2)" :class="{unclickable : !dataLength[1]}">
            好数据
            <!-- <span v-if="dataNum">({{dataNum.correct}})</span> -->
          </li>
          <li @click="selectData(3)" :class="{unclickable : !dataLength[2]}">
            坏数据
            <!-- <span v-if="dataNum">({{dataNum.bad}})</span> -->
          </li>
          <li @click="selectData(4)" :class="{unclickable : !dataLength[3]}">
            未标注
            <!-- <span v-if="dataNum">({{dataNum.unfinish}})</span> -->
          </li>
        </ul>
      </div>
      <div class="info_three preview" v-if="pageType === 'mark'">
        <div class="info_three_one" @click="preTask">
          <i></i>
          <span>上一张</span>
        </div>
        <div class="info_three_two" @click="nextTask">
          <i></i>
          <span>下一张</span>
        </div>
        <div class="info_three_three" @click="markBadData">
          <i></i>
          <span>{{currentFile.isBad == 1 ? '标为好数据' : '标为坏数据'}}</span>
        </div>
      </div>
      <div class="switch_type" v-if="pageType === 'result'">
        <div class="switch_type_s switch_type_0" @click="resultFile(0)">
          <i :class="{selected : resultType == 0}"></i>
          <span>标注结果</span>
        </div>
        <div class="switch_type_s switch_type_1" @click="resultFile(1)">
          <i :class="{selected : resultType == 1}"></i>
          <span>检查结果</span>
        </div>
        <div class="switch_type_s switch_type_2" @click="resultFile(2)">
          <i :class="{selected : resultType == 2}"></i>
          <span>质检结果</span>
        </div>
      </div>
      <div class="info_four">
        <i class="divide"></i>
        <i class="info_four_top" :class="{arrowShow : arrowShow}" @click="hideHeader"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'centerControl',
  data () {
    return {
      listShow: false,
      arrowShow: false,
      fileType: 1
    };
  },
  props: {
    files: {
      type: Object,
      default: () => ({})
    },
    allFiles: {
      type: Array,
      default: () => []
    },
    currentFile: {
      type: Object,
      default: () => ({})
    },
    currentFileId: {},
    filesType: {},
    pageType: {},
    resultType: {
      default: 0
    }
  },
  computed: {
    finishNum: function () {
      // 查看标注完成个数
      const len = this.allFiles.length;
      var result = 0;
      if (len === 0) return '--';
      for (let i = 0; i < len; i++) {
        if (this.allFiles[i].status === 1) {
          result++;
        }
      }
      return result;
    },
    dataLength: function () {
      let dataL = [0, 0, 0, 0];
      if (!this.allFiles) {
        return dataL;
      }
      const len = this.allFiles.length;
      var info = this.allFiles;
      dataL[0] = len;
      for (let i = 0; i < len; i++) {
        if (info[i].isBad === 0) {
          // 好数据
          dataL[1]++;
        }
        if (info[i].isBad === 1) {
          // 坏数据
          dataL[2]++;
        }
        if (info[i].status === 0) {
          // 未标注
          dataL[3]++;
        }
      }
      return dataL;
    }
  },
  methods: {
    // 隐藏显示文件列表
    changeFileList () {
      this.listShow = !this.listShow;
      this.$emit('changeFileList', this.listShow);
    },
    selectData (type) {
      this.$emit('selectData', type);
    },
    preTask () {
      this.$emit('preTask');
    },
    nextTask () {
      this.$emit('nextTask');
    },
    markBadData () {
      this.$emit('markBadData');
    },
    // 隐藏头部
    hideHeader () {
      this.arrowShow = !this.arrowShow;
      this.$emit('hideHeader', this.arrowShow);
    },
    resultFile (type) {
      this.$emit('resultFile', type)
    }
  }
};
</script>
<style lang="less" scoped>
.preview{
  opacity: 0.4;
}
.no_select{
  cursor: no-drop;
}
.head-info {
    width: 100%;
    height: 50px;
    z-index: 1000;
    background-color: #f2f3f4;
    position: absolute;
    top: 50px;
    left: 0;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    box-shadow: inset 2px 2px 2px 0px #fff, inset 0 0 1px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: inset 2px 2px 2px 0px #fff,
        inset 0 0 1px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 2px 2px 2px 0px #fff,
        inset 0 0 1px 0px rgba(0, 0, 0, 0.6);
}
.topHide {
    min-width: 1024px;
    height: 50px;
    background: -webkit-linear-gradient(#ededed, #f7f7f7);
    background: -o-linear-gradient(#ededed, #f7f7f7);
    background: -moz-linear-gradient(#ededed, #f7f7f7);
    background: linear-gradient(#ededed, #f7f7f7);
    position: absolute;
    top: 0px;
    left: 0;
}
.head-info .info {
    width: 100%;
    height: 100%;
    background-color: #f2f3f4;

    flex-flow: row nowrap;
    margin: 0 auto;
    margin-right: 22px;
    box-shadow: inset 2px 2px 2px 0 #ffffff,
        inset 0 0 10px 0 rgba(9, 22, 22, 0.06);
}
.head-info .info_one {
    display: flex;
    flex-flow: row nowrap;
    margin-left: 20px;
    position: relative;
    float: left;
}
.head-info .info_one .divide {
    display: inline-block;
    width: 3px;
    height: 22px;
    margin: 14px 27px 0 27px;
    background: url("");
}
.head-info .info_one .info_one_left span {
    color: #333333;
    font-size: 14px;
    line-height: 50px;
    cursor: pointer;
}
.head-info .info_one .info_one_left .manue {
    display: inline-block;
    width: 14px;
    height: 11px;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    background: url("") no-repeat 0 0;
}
.head-info .info_one .info_one_left .seleted {
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}
.head-info .info_one .info_one_left:hover .manue {
    background: url("") no-repeat 0
    // 0;
}
.head-info .info_one .info_one_right {
    margin-left: 20px;
    position: relative;
}
.head-info .info_one .info_one_right .schedule {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 18px;
    background: url("") no-repeat 0
    // 0;
}
.head-info .info_one .info_one_right:hover .schedule {
    background: url("");
}

.allFile {
    position: relative;
    width: 110px;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-right: 10px;
}
.allFile::after {
    background: url("") no-repeat
    1px 2px;
}
.allFile::before {
    display: inline-block;
    width: 15px;
    height: 15px;
    content: "";
    background: url("") no-repeat 0px
        0px;
    position: absolute;
    left: 0px;
    top: 18px;
}
.allFile > span {
    display: inline-block;
    width: 62px;
    text-align: center;
}
.allFile:hover .fileType {
    display: block;
}
.allFile .fileType {
    position: absolute;
    display: none;
    width: 100px;
    height: 125px;
    background: #fff;
    z-index: 9999;
    left: 16px;
    padding: 5px 2px;
    border-radius: 3px;
    top: 40px;
}
.allFile .fileType li {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid #eaf0f0;
    cursor: pointer;
}
.allFile .fileType li:last-child {
    border-bottom: 1px solid #fff;
}
.allFile .fileType li:hover {
    color: #14cb6b;
}
.allFile:after {
    display: inline-block;
    width: 18px;
    height: 15px;
    content: "";
}

.head-info .info_three {
    display: flex;
    flex-flow: row nowrap;
    float: left;
}

.head-info .info_three .info_three_one i {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: 2px;
    left: 0;
    background: url("") no-repeat;
}
.head-info .info_three .info_three_one:hover i {
    background: url("") no-repeat;
}
.head-info .info_three .info_three_two {
    margin: 0 24px;
}
.head-info .info_three .info_three_two i {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: 2px;
    left: 0;
    background: url("") no-repeat;
}
.head-info .info_three .info_three_two:hover i {
    background: url("") no-repeat;
}
.head-info .info_three .divide {
    display: inline-block;
    width: 3px;
    height: 22px;
    margin: 14px 10px 0 430px;
    background: url("");
}
.head-info .info_three .info_three_three i {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    top: 2px;
    left: 0;
    background: url("") no-repeat;
}
.head-info .info_three .info_three_three:hover i {
    background: url("") no-repeat;
}

.head-info .info_four {
    width: 60px;
    float: right;
    position: relative;
}
.head-info .info_four .info_four_top {
    display: inline-block;
    width: 13px;
    height: 11px;
    position: absolute;
    top: 20px;
    right: 22px;
    cursor: pointer;
    background: url("") no-repeat
    center;
    transform: rotate(180deg);
}
.head-info .info_four .arrowShow {
    transform: rotate(0deg);
}
.head-info .info_four .divide {
    display: inline-block;
    width: 3px;
    height: 22px;
    margin: 14px 38px 0 3px;
    background-image: url("");
}
.allFile .unclickable {
    color: #cacaca;
    pointer-events: none;
}
.markpro {
    color: #333333;
    font-size: 14px;
    display: inline-block;
    line-height: 50px;
    margin-left: 20px;
    cursor: pointer;
}
.head-info .info_three span {
    color: #333333;
    font-size: 14px;
    line-height: 50px;
    cursor: no-drop;
}

.switch_type {
    display: flex;
    flex-flow: row nowrap;
    float: left;
    .switch_type_s {
        margin-left: 20px;
        position: relative;
        i {
            margin-right: 5px;
            position: relative;
            top: 2px;
            left: 0;
            display: inline-block;
            width: 14px;
            height: 14px;
            cursor: pointer;
            background: url("");
        }
        i.selected {
            display: inline-block;
            cursor: pointer;
            background: url("");
        }
        span {
            color: #333333;
            font-size: 14px;
            line-height: 50px;
            cursor: pointer;
        }
    }
    .switch_type_1 {
    }
    .switch_type_2 {
    }
}
</style>
